<template>
    <el-row type="flex">
        <el-col :span="24">
            <div class="index_from page-account-container">
                <div class="page-account-top ">
                    <span class="page-account-top-tit">一号通账户注册</span>
                </div>
                <el-form ref="formInline" :model="formInline" :rules="ruleInline" @submit.native.prevent>
                    <el-form-item prop="phone" class="maxInpt">
                        <el-input type="number" v-model="formInline.phone" placeholder="请输入您的手机号" />
                    </el-form-item>
                    <el-form-item prop="password" class="maxInpt">
                        <el-input type="password" v-model="formInline.password" placeholder="请设置一号通平台登录密码" />
                    </el-form-item>
                    <!-- <el-form-item prop="url" class="maxInpt">
                        <el-input type="text" v-model="formInline.url" placeholder="绑定一号通网址域名" />
                    </el-form-item>-->
                    <el-form-item prop="verify_code" class="maxInpt">
                        <div class="code">
                            <el-input type="text" v-model="formInline.verify_code" placeholder="请输入验证码" />
                            <el-button :disabled=!canClick @click="cutDown">{{ cutNUm }}</el-button>
                        </div>
                    </el-form-item>
                    <el-form-item class="maxInpt">
                        <el-button type="primary" @click="handleSubmit('formInline')" class="btn">注册</el-button>
                    </el-form-item>
                </el-form>
                <div class="page-account-other">
                    <span @click="changelogo">立即登录</span>
                </div>
            </div>
        </el-col>
    </el-row>
</template>

<script>
// +----------------------------------------------------------------------
// | CRMEB [ CRMEB赋能开发者，助力企业发展 ]
// +----------------------------------------------------------------------
// | Copyright (c) 2016~2021 https://www.crmeb.com All rights reserved.
// +----------------------------------------------------------------------
// | Licensed CRMEB并不是自由软件，未经许可不能去掉CRMEB相关版权
// +----------------------------------------------------------------------
// | Author: CRMEB Team <admin@crmeb.com>
// +----------------------------------------------------------------------
import { registerApi } from '@/api/sms';
import { captchaApi } from '@/api/setting';
export default {
    name: 'register',
    data() {
        const validatePhone = (rule, value, callback) => {
            if (!value) {
                return callback(new Error('请填写手机号'));
            } else if (!/^1[3456789]\d{9}$/.test(value)) {
                callback(new Error('手机号格式不正确!'));
            } else {
                callback();
            }
        };
        return {
            cutNUm: '获取验证码',
            canClick: true,
            formInline: {
                url: '',
                password: '',
                verify_code: '',
                phone: ''
            },
            ruleInline: {
                account: [
                    { required: true, message: '请输入短信平台账号', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请输入短信平台密码/token', trigger: 'blur' }
                ],
                url: [
                    { required: true, message: '请输入网址域名', trigger: 'blur' }
                ],
                phone: [
                    { required: true, validator: validatePhone, trigger: 'blur' }
                ],
                sign: [
                    { required: true, message: '请输入短信签名', trigger: 'blur' }
                ],
                verify_code: [
                    { required: true, message: '请输入验证码', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        // 短信验证码
        cutDown() {
            if (this.formInline.phone) {
                if (!this.canClick) return;
                this.canClick = false;
                this.cutNUm = 60;
                captchaApi(this.formInline.phone).then(async res => {
                    this.$message.success(res.message);
                }).catch(res => {
                    this.$message.error(res.message);
                })
                let time = setInterval(() => {
                    this.cutNUm--;
                    if (this.cutNUm === 0) {
                        this.cutNUm = '获取验证码';
                        this.canClick = true;
                        clearInterval(time)
                    }
                }, 1000)
            } else {
                this.$message.warning('请填写手机号!');
            }
        },
        // 注册
        handleSubmit(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    registerApi(this.formInline).then(async res => {
                        this.$message.success(res.message);
                        setTimeout(() => {
                            this.changelogo();
                        }, 1000);
                    }).catch(res => {
                        this.$message.error(res.message);
                    })
                } else {
                    return false;
                }
            })
        },
        // 立即登录
        changelogo() {
            this.$emit('on-change')
        }
    }
}
</script>

<style scoped lang="scss">
.maxInpt {
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;

    .el-button {
        width: 100%;
    }
}

.el-input__inner {
    padding-right: 0 !important;
}

.page-account-container {
    text-align: center;
    padding: 50px 0;
}

.page-account-top {
    margin-bottom: 20px;
}

.page-account-top-tit {
    font-size: 21px;
    color: #1890FF;
}

.page-account-other {
    text-align: center;
    color: #1890FF;
    font-size: 12px;

    span {
        cursor: pointer;
    }
}

.code {
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>
